<template id="AlbumDetails">
  <div class="AlbumDetails">
    <div class="pc">
      <go-to-back />
      <p class="albumTitle" v-if="albumTitle">专辑名称：{{ albumTitle }}</p>
      <div class="productsContent">
        <div
          class="productItem"
          v-for="(item, index) in productList"
          :key="index"
        >
          <img :src="item.image" @click="gotoDetail(item)" />
          <img
            :src="pcSellout"
            class="pcSellout"
            v-if="!item.goods_stock"
            @click="gotoDetail(item)"
          />
          <div class="beginTime" v-if="!item.is_buy">
            <p>{{ item.sellTime }}</p>
          </div>
          <div class="productDesc">
            <img :src="productImage" class="productImage" />
            <p class="productTitle">{{ item.goods_name }}</p>
            <div class="defaultInfo">
              <img :src="defaultIcon" />
              <p>METAUP</p>
            </div>
            <md-button
              class="pcBtn lookOver"
              v-if="item.goods_stock"
              @click="buyProduct(item)"
              >立即查看</md-button
            >
            <md-button class="pcBtn sellout" v-else disabled>已售罄</md-button>
          </div>
        </div>
      </div>
      <div class="pcPage" v-if="productList.length > 0">
        <el-pagination
          @current-change="changePage"
          :current-page="page.defaultPagination"
          :page-sizes="[8]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalPages"
          popper-class="pagePopper"
        >
        </el-pagination>
      </div>
    </div>

    <!-- <div class="phoneProducts">
      <mescroll-vue
        ref="mescroll"
        :down="mescrollDown"
        :up="mescrollUp"
        @init="mescrollInit"
      >
        <div class="productGrop">
          <div
            class="productItem"
            v-for="(item, index) in productList"
            :key="index"
            @click="buyProduct(item)"
          >
            <div class="productImages">
              <div class="productImageBox">
                <img :src="item.image" />
                <img :src="sellout" class="sellout" v-if="!item.goods_stock" />
              </div>
              <div class="sellDay" v-if="item.is_buy == 0">
                {{ item.sellTime }}
              </div>
            </div>
            <div class="productDesc">
              <p class="productTitle">{{ item.goods_name }}</p>
              <div class="buy">
                <p class="price"><span>¥</span>{{ item.price }}</p>
                <div class="phoneProductNumber">
                  商品剩余{{ item.goods_stock }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </mescroll-vue>
    </div> -->
    <div class="phoneProducts">
      <div class="productGrop">
        <div
          class="productItem"
          v-for="(item, index) in productList"
          :key="index"
          @click="buyProduct(item)"
        >
          <div class="productImages">
            <div class="productImageBox">
              <img :src="item.image" />
              <img :src="sellout" class="sellout" v-if="!item.goods_stock" />
            </div>
            <div class="sellDay" v-if="item.is_buy == 0">
              {{ item.sellTime }}
            </div>
          </div>
          <div class="productDesc">
            <p class="productTitle">{{ item.goods_name }}</p>
            <div class="buy">
              <p class="price"><span>¥</span>{{ item.price }}</p>
              <div class="phoneProductNumber">
                商品剩余{{ item.goods_stock }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="productEnd">没有更多商品了哦~</div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { Pagination } from "@/components";
import GoToBack from "../../category/components/GoToBack.vue";
import MescrollVue from "mescroll.js/mescroll.vue";
export default {
  name: "AlbumDetails",
  components: { Pagination, GoToBack, MescrollVue },
  props: {
    productList: {
      type: Array,
    },
    albumTitle: {
      type: String,
    },
    page: {
      type: Object,
    },
  },
  // 定义属性
  data() {
    return {
      pcSellout: require("@/assets/images/product/sellout.png"),
      defaultIcon: require("@/assets/images/mail/defaultIcon.png"),
      productImage: require("@/assets/images/mail/productImage.png"),
      sellout: require("@/assets/images/mobile/sellout.png"),
      currentSelect: "",
      isMouseOver: false,
      mescroll: null, // mescroll实例对象
      mescrollDown: { use: false }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        auto: false,
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10, //每页数据条数,默认10
        },
        htmlNodata:
          '<p class="upwarp-nodata" style="font-size: 0.14583rem;font-family: Microsoft YaHei;font-weight: 600;color: #808080;">-- END --</p>',
        htmlLoading:
          '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip" style="font-size: 0.14583rem;font-family: Microsoft YaHei;font-weight: 600;color: #808080;">加载中..</p>',
        noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看,这就是为什么无更多数据有时候不显示的原因
      },
    };
  },
  beforeRouteEnter(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      vm.$refs.mescroll.beforeRouteEnter(); // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
    });
  },
  beforeRouteLeave(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
    this.$refs.mescroll.beforeRouteLeave(); // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
    next();
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    resetPage() {
      this.mescrollUp.page.num = 1;
      this.mescrollUp.page.size = 10;
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    async upCallback(page, mescroll) {
      let payload = {
        page: page,
        mescroll: mescroll,
      };
      this.$emit("upCallback", payload);
    },
    changeBuy(val) {
      if (val.is_buy == 1) {
        if (val.goods_stock) {
          return "立即购买";
        } else {
          return "已售空";
        }
      } else {
        return "预售";
      }
    },
    buyProduct(item) {
      this.$emit("click", item);
    },
    buyProductDeep(item) {
      console.log("i");
      this.$emit("buyProductDeep", item);
    },
    changePage(payload) {
      this.$emit("change", payload);
    },
    // 跳转到详情页
    gotoDetail(item) {
      this.$emit("gotoDetail", item);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.AlbumDetails {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  p {
    margin-bottom: 0;
  }
  .pc {
    .albumTitle {
      font-size: 20px;
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
    .productsContent {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-top: 20px;
      .productItem {
        margin-right: 32px;
        margin-bottom: 32px;
        border-radius: 5px;
        position: relative;
        img {
          width: 276px;
          height: 276px;
          cursor: pointer;
        }
        .pcSellout {
          position: absolute;
          top: 0;
          left: 0;
        }
        .beginTime {
          position: absolute;
          top: 251px;
          left: 0;
          width: 154px;
          height: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          background: url("../../../../../assets/images/product/sellDayBg.png");
          background-size: 100% 100%;
        }
        .productDesc {
          width: 276px;
          padding: 20px 15px 25px 20px;
          position: relative;
          background: #2b2c2d;
          .productImage {
            width: 126px;
            height: 191px;
            position: absolute;
            right: 0;
            top: 0;
            cursor: unset;
          }
          .productTitle {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
            color: #ffffff;
            font-family: PingFangSC-Semibold, PingFang SC;
            margin-bottom: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            min-height: 52px;
            position: relative;
            z-index: 2;
            line-height: 26px;
          }
          .defaultInfo {
            display: flex;
            align-items: center;
            img {
              width: 28px;
              height: 28px;
              margin-right: 10px;
              cursor: unset;
            }
            p {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
            }
          }
          .pcBtn {
            width: 246px;
            height: 36px;
            position: relative;
            z-index: 2;
            background-size: 100% 100%;
            font-size: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #1e2020 !important;
            margin: 0;
            margin-top: 16px;
            box-shadow: none;
            background-color: transparent !important;
            border-radius: unset !important;
          }
          .lookOver {
            background-image: url("../../../../../assets/images/mail/lookOver.png");
          }
          .sellout {
            background-image: url("../../../../../assets/images/mail/sellout.png");
          }
        }
      }
      .productItem:nth-child(4n) {
        margin-right: 0;
      }
    }
    .pcPage {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 28px;
      margin-bottom: 60px;
      /deep/ .el-pagination__total {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      /deep/ .el-input__inner {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        background: #2b2c2d;
        border: none;
        cursor: default;
        padding: 0;
      }
      /deep/ .el-pagination .btn-prev {
        background: #2b2c2d;
        color: #bbbfc3;
        margin-right: 10px;
        padding: 0;
      }

      /deep/ .el-pagination .btn-next {
        background: #2b2c2d;
        color: #bbbfc3;
        padding: 0;
      }

      /deep/ .el-pagination__jump {
        color: #fff !important;
      }
      .el-pagination .btn-prev:hover {
        color: #00ffb0 !important;
      }
      .el-pagination .btn-next:hover {
        color: #00ffb0 !important;
      }
      /deep/ .el-pager li {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        background: #2b2c2d;
        margin-right: 10px;
        padding: 0;
      }
      /deep/ .el-pager li:hover {
        color: #00ffb0 !important;
      }
      /deep/ .el-pager li.active {
        color: #1e2020 !important;
        cursor: default;
        background: #00ffb0 !important;
      }
    }
  }

  .phoneProducts {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .AlbumDetails {
    padding: 40px 30px 62px 30px;
    .pc {
      display: none;
    }
    .phoneProducts {
      display: block;
      align-items: center;
      justify-content: space-between;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .productGrop {
        align-items: center;
        justify-content: space-between;
        display: flex;
        flex-wrap: wrap;
        padding: 0 2px;
        width: 100%;
        .productItem {
          width: calc(50% - 10px);
          margin-right: 0;
          background: #2b2c2d;
          box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
          border-radius: 12px;
          margin-bottom: 26px;
          height: fit-content;
          .productImages {
            height: 100%;
            position: relative;
            .productImageBox {
              height: 100%;
              position: relative;
              img {
                width: 100%;
                height: 332px;
                box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
                border-radius: 12px 12px 0px 0px;
              }
              .sellout {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                height: 100%;
                width: 100%;
              }
            }
            .sellDay {
              background: url("../../../../../assets/images/mobile/sellBtnBg.png");
              background-size: 100% 100%;
              font-size: 20px;
              font-weight: 500;
              color: #000000;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              bottom: 0;
              left: 0;
              padding: 6px 19px 2px 10px;
            }
          }
          .productDesc {
            padding: 16px 20px 28px 20px;
            .productTitle {
              font-size: 28px;
              margin-bottom: 24px;
              line-height: 36px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              min-height: 72px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .productNumber {
              display: none;
            }
            .productLimit {
              display: none;
            }
            .buy {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .price {
                font-size: 24px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #00ffb0;
                span {
                  font-size: 18px;
                  margin-right: 5px;
                }
              }
              .buyButton {
                display: none;
              }
              .phoneProductNumber {
                display: block;
                font-size: 20px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #8e8f8f;
              }
            }
          }
        }
      }
      .productEnd {
        margin: 20px auto;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }
  }
}
</style>
